<template>
	<view class="container100">
		<view class="tui-coupon-list" v-if="couponList.length !== 0">
			
			<radio-group v-if="type == '1'" @change="selectCoupon">
				<label v-for="(info,index) in couponList" :key="index">
					<view class="tui-coupon-item tui-top20">
						<image :src="webURL+'/static/images/mall/coupon/bg_coupon_3x.png'" class="tui-coupon-bg" mode="widthFix"></image>
						<view class="tui-coupon-item-left">
							<view class="tui-coupon-price-box">
								<view class="tui-coupon-price-sign">￥</view>
								<view class="tui-coupon-price tui-price-small">{{info.price}}</view>
							</view>
							<view class="tui-coupon-intro">满{{info.condition}}元可用</view>
						</view>
						<view class="tui-coupon-item-right">
							<view class="tui-coupon-content">
								<view class="tui-coupon-title-box">
									<view class="tui-coupon-btn" v-if="info.product_id == '0'">全场券</view>
									<view class="tui-coupon-btn" v-else>部分券</view>
									<view class="tui-coupon-title" v-if="info.product_id == '0'">全部商品可用</view>
									<view class="tui-coupon-title" v-else>仅部分活动可用</view>
								</view>
								<view class="tui-coupon-rule">
									<view class="tui-rule-box tui-padding-btm">
										<view class="tui-coupon-circle"></view>
										<view class="tui-coupon-text">不可叠加使用</view>
									</view>
									<view class="tui-rule-box">
										<view class="tui-coupon-circle"></view>
										<view class="tui-coupon-text">{{info.activitytimestr}}至{{info.activitytimeend}}</view>
									</view>
								</view>
							</view>
						</view>
						<view class="tui-btn-box" :style="{'background-color': (info.status == 1 ? '#FF9014':'#dc3545')}">
							<tui-button @tap="tapCoupon(info.id,info.status)" type="danger" width="152rpx" height="52rpx" :size="24" shape="circle" >{{info.status == 1 ?'立即使用':'立即领取'}}</tui-button>
						</view>
					</view>
				</label>
			</radio-group>
			
			<radio-group v-else @change="selectCoupon">
				<view @tap="selectCoupon(info,1)" class="no-use" >不使用有优惠卷</view>
				<label v-for="(info,index) in mycoupon" :key="index">
					<view class="tui-coupon-item tui-top20" >
						<image :src="webURL+'/static/images/mall/coupon/bg_coupon_3x.png'" class="tui-coupon-bg" mode="widthFix"></image>
						<view class="tui-coupon-item-left">
							<view class="tui-coupon-price-box">
								<view class="tui-coupon-price-sign">￥</view>
								<view class="tui-coupon-price tui-price-small">{{info.coupon.price}}</view>
							</view>
							<view class="tui-coupon-intro">满{{info.coupon.condition}}元可用</view>
						</view>
						<view class="tui-coupon-item-right">
							<view class="tui-coupon-content">
								<view class="tui-coupon-title-box">
									<view class="tui-coupon-btn" v-if="info.coupon.product_id == '0'">全场券</view>
									<view class="tui-coupon-btn" v-else>部分券</view>
									<view class="tui-coupon-title" v-if="info.coupon.product_id == '0'">全部商品可用</view>
									<view class="tui-coupon-title" v-else>仅部分活动可用</view>
								</view>
								<view class="tui-coupon-rule">
									<view class="tui-rule-box tui-padding-btm">
										<view class="tui-coupon-circle"></view>
										<view class="tui-coupon-text">不可叠加使用</view>
									</view>
									<view class="tui-rule-box">
										<view class="tui-coupon-circle"></view>
										<view class="tui-coupon-text">{{info.coupon.activitytimestr}}至{{info.coupon.activitytimeend}}</view>
									</view>
								</view>
							</view>
						</view>
						<view class="tui-btn-box" v-if="info.status==0">
							<tui-button @tap="selectCoupon(info,cou)" type="danger" width="152rpx" height="52rpx" :size="24" shape="circle" >立即使用</tui-button>
						</view>
						
						<view class="tui-btn-box" v-else style="background-color: #ccc;">
							<tui-button type="danger" width="152rpx" height="52rpx" :size="24" shape="circle" >已经使用</tui-button>
						</view>
					</view>
				</label>
			</radio-group>

		</view>
		<view v-else class="text-center p-2 font-sm text-muted">
			暂时没有优惠券~
		</view>
		<!--加载loadding-->
		<!-- <tui-loadmore v-if="loadding" :index="3" type="red"></tui-loadmore>
		<tui-nomore v-if="!pullUpOn" backgroundColor="#f5f5f5"></tui-nomore> -->
		<!--加载loadding-->
	</view>
</template>

<script>
	var api = require('@/common/api.js')
	export default {
		data() {
			return {
				loadding: false,
				pullUpOn: true,
				couponList:[],
				webURL:"https://www.thorui.cn/wx",
				type:'',
				mycoupon:[],
				buytype:0,
				cou:'',
				price:'',
				productid:'',
				userinfo:'',
			}
		},
		onLoad(options) {
			if(this.tui.isLogin()){
				this.userinfo = uni.getStorageSync("user")
			}else{
				uni.showToast({
					title:"您没有登陆，请先登录",
					icon:"none"
				})
				setTimeout(function(){
					uni.navigateTo({
						url:"/pages/mall-extend/my/my"
					})
				},1000)
			}
			console.log(options);
			this.type = options.type;
			
			if(options.cou){
				this.cou = options.cou;
			}
			if(options.price){
				this.price = options.price;
			}
			if(options.productid){
				this.productid = options.productid;
				console.log(this.productid);
			}
			api.get({
				url:'order/couponuser',
				data:{user_id:this.userinfo.id},
				success: res => {
					this.mycoupon = res.data;
				}
			});
			api.get({
				url:"order/canUseCoupon",
				data:{
					user_id:this.userinfo.id,
				},
				success:res=>{
					this.couponList = res.data;
				}
			})
		},
		methods: {
			selectCoupon:function(e,f){
				if(f==0){
					uni.redirectTo({
						url:"/pages/product/product"
					})
				}
				if(f==1){
					let pages = getCurrentPages();
					let prevPage = pages[pages.length - 2];
					prevPage.$vm.coupon = '';
					prevPage.$vm.total_price_z = this.price - e.coupon.price;
					uni.navigateBack()
				}
				
				if(f==2){
					console.log(e.coupon.product_id);
					if(e.coupon.product_id == this.productid || e.coupon.product_id == '0'){
						if(e.coupon.condition < this.price){
							let pages = getCurrentPages();
							let prevPage = pages[pages.length - 2];
							prevPage.$vm.coupon = e;
							prevPage.$vm.total_price_z = this.price - e.coupon.price;
							uni.navigateBack()
						}else{
							console.log('111');
							uni.showToast({
								title: '优惠卷不符合条件。',
								icon:'none',
								duration: 2000
							});
						}
					}else{
						console.log('222');
						uni.showToast({
							title: '优惠卷不符合条件。',
							icon:'none',
							duration: 2000
						});
					}


				}
				

			},

			tapCoupon(id,status){
				if(status == 0){
					api.post({
						url:"order/getCoupon",
						data:{
							coupon_id:id,
							user_id:this.userinfo.id,
						},
						success: res=>{
							if(res.code == 1){
								uni.showToast({
									title: '优惠卷领取成功。',
									icon:'success',
									duration: 2000
								});
								setTimeout(function() {
									uni.redirectTo({
										url:"/pages/coupon/coupon?type=1"
									})
								}, 2000);

							}else{
								uni.showToast({
									title: '优惠卷已领取。',
									icon:'none',
									duration: 2000
								});
								setTimeout(function() {
									uni.redirectTo({
										url:"/pages/coupon/coupon?type=1"
									})
								}, 2000);
							}
						}
					})
				}
				if(status == 1){
					uni.redirectTo({
						url:"/pages/product/product"
					})
				}
				
			},
		},
		onPullDownRefresh() {
			setTimeout(() => {
				this.pullUpOn = true
				uni.stopPullDownRefresh()
			}, 200);
		},
		onReachBottom() {
			//只是测试效果，逻辑以实际数据为准
			if (!this.pullUpOn) return;
			this.loadding = true
			setTimeout(() => {
				this.loadding = false
				this.pullUpOn = false
			}, 1000)
		}
	}
</script>

<style>
	page {
		background-color: #F5F5F5;
	}
	.no-use{background-color: #fff;
    padding: 15rpx 20rpx;
    /* width: 100%; */
    font-size: 32rpx;}
	.container100 {
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-coupon-list {
		width: 100%;
		padding: 0 25rpx;
		box-sizing: border-box;
	}

	.tui-coupon-banner {
		width: 100%;
	}

	.tui-coupon-item {
		width: 100%;
		height: 210rpx;
		position: relative;
		display: flex;
		align-items: center;
		padding-right: 30rpx;
		box-sizing: border-box;
		overflow: hidden;
	}

	.tui-coupon-bg {
		width: 100%;
		height: 210rpx;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
	}

	.tui-coupon-sign {
		height: 110rpx;
		width: 110rpx;
		position: absolute;
		z-index: 9;
		top: -30rpx;
		right: 40rpx;
	}

	.tui-coupon-item-left {
		width: 218rpx;
		height: 210rpx;
		position: relative;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		flex-shrink: 0;
	}

	.tui-coupon-price-box {
		display: flex;
		color: #e41f19;
		align-items: flex-end;
	}

	.tui-coupon-price-sign {
		font-size: 30rpx;
	}

	.tui-coupon-price {
		font-size: 70rpx;
		line-height: 68rpx;
		font-weight: bold;
	}

	.tui-price-small {
		font-size: 58rpx !important;
		line-height: 56rpx !important;
	}


	.tui-coupon-intro {
		background: #F7F7F7;
		padding: 8rpx 10rpx;
		font-size: 26rpx;
		line-height: 26rpx;
		font-weight: 400;
		color: #666;
		margin-top: 18rpx;
	}

	.tui-coupon-item-right {
		flex: 1;
		height: 210rpx;
		position: relative;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: 24rpx;
		box-sizing: border-box;
		overflow: hidden;
	}

	.tui-coupon-content {
		width: 82%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.tui-coupon-title-box {
		display: flex;
		align-items: center;
	}

	.tui-coupon-btn {
		padding: 6rpx;
		background: #FFEBEB;
		color: #e41f19;
		font-size: 25rpx;
		line-height: 25rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		transform: scale(0.9);
		transform-origin: 0 center;
		border-radius: 4rpx;
		flex-shrink: 0;
	}

	.tui-color-grey {
		color: #888 !important;
	}

	.tui-bg-grey {
		background: #F0F0F0 !important;
		color: #888 !important;
	}

	.tui-coupon-title {
		width: 100%;
		font-size: 26rpx;
		color: #333;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.tui-coupon-rule {
		padding-top: 52rpx;
	}

	.tui-rule-box {
		display: flex;
		align-items: center;
		transform: scale(0.8);
		transform-origin: 0 100%;
	}

	.tui-padding-btm {
		padding-bottom: 6rpx;
	}

	.tui-coupon-circle {
		width: 8rpx;
		height: 8rpx;
		background: rgb(160, 160, 160);
		border-radius: 50%;
	}

	.tui-coupon-text {
		font-size: 28rpx;
		line-height: 28rpx;
		font-weight: 400;
		color: #666;
		padding-left: 8rpx;
		white-space: nowrap;
	}

	.tui-top20 {
		margin-top: 20rpx;
	}

	.tui-coupon-title {
		font-size: 28rpx;
		line-height: 28rpx;
	}


	.tui-coupon-radio {
		transform: scale(0.7);
		transform-origin: 100% center;
	}

	.tui-btn-box {
	position: absolute;
    width: 146rpx;
    height: 52rpx;
    right: 20rpx;
    bottom: 70rpx;
    z-index: 10;
    background-color: #FF9014;
    color: #fff;
    text-align: center;
    border-radius: 30rpx;
    line-height: 52rpx;
	}

	/* #ifdef APP-PLUS || MP */
	.wx-radio-input {
		margin-right: 0 !important;
	}

	/* #endif */

	/* #ifdef H5 */
	>>>uni-radio .uni-radio-input {
		margin-right: 0 !important;
	}

	/* #endif */
</style>
